<!--
 * @Date: 2024-06-20 20:23:48
 * @LastEditors: qinlinqing
 * @LastEditTime: 2024-07-06 08:22:26
 * @FilePath: /my/wujing/code/wujing/uaerManager/src/pages/dashboard.vue
-->
<template>
    <div class="w100_ h100_">
        <div class="box flex-column overflow-x">
            <div class="w100_ flex-row mb20">
                <div class="flex1 topitem flex-column" v-for="(v,i) in obj.types" :key="i" @click="go(v)">
                    <span class="name">{{v.name||''}}</span>
                    <span class="now">{{v.now||0}}</span>
                    <div v-if="v.last>0" :class="['yoy','flex-row-center',v.now>=v.last?'':'down']">
                        <span>
                            <img class="updownicon" v-if="v.now>=v.last" src="../assets/icon/up.png" />
                            <img class="updownicon" v-else src="../assets/icon/down.png" />
                        </span>
                        <span class="num">{{v.yoy||0}}%</span>
                        <span class="">同比{{v.now>=v.last?'增长':'下降'}}</span>
                    </div>
                    <div class="topicon flex-center" :style="{background: `rgba(${v.color}, 0.2)`}">
                        <img :src="v.icon">
                    </div>
                </div>
            </div>
            <div class="w100_ flex1 flex-row">
                <div class="flex2 h100_ flex-column mr40" v-if="obj.idOpinion">
                    <div class="flex-row-center mb5">
                        <span class="titleLabel mr10">舆情统计</span>
                        <DateRange v-model:start="obj.req.start" v-model:end="obj.req.end" @change="getprovince" />
                    </div>
                    <div id="map_echart" class="w100_ flex1"></div>
                </div>
                <div class="flex1 flex-column">
                    <div class="flex-row-center mb5">
                        <span class="titleLabel mb5">文件统计</span>
                    </div>
                    <div :class="['flex1',obj.idOpinion?'fenitem-box1':'fenitem-box2']">
                        <div class="fenitem flex-column" v-for="(v,i) in obj.types" :key="i">
                            <span class="name">{{v.name}}</span>
                            <div class="flex1 w100_ flex-row">
                                <div class="flex-column-center mr10">
                                    <DatePicker v-model:value="obj.types[i].start" type="month" />
                                    <div class="hline"></div>
                                    <DatePicker v-model:value="obj.types[i].end" type="month" />
                                    <div class="flex1"></div>
                                    <div class="flex-row-center w100_ ju-between">
                                        <div class="combtn flex-center" @click="serfen(i,false)">确认</div>
                                        <div class="calbtn flex-center" @click="serfen(i,true)">重置</div>
                                    </div>
                                </div>
                                <div :id="`echart_fen_${i}`" class="flex1 h100_"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
    import { reactive, getCurrentInstance, watch, computed, onMounted } from 'vue'
    import axios from 'axios'
    import dayjs from 'dayjs'
    import areas_v3_data from '../utils/zhmap.json'
    import DatePicker from '@/components/date_picker.vue'
    import DateRange from '@/components/date_range.vue'

    import icon0 from '@/assets/icon/0.png'
    import icon1 from '@/assets/icon/1.png'
    import icon2 from '@/assets/icon/2.png'
    import icon3 from '@/assets/icon/3.png'

    let { proxy } = getCurrentInstance()
    let obj = reactive({
        types: [
            {name: '总文件数', type: 'all', now: 0, last: 0, yoy: 0, start: '', end: '', series: [], xAxis: [], color: `255, 113, 96`, icon: icon0, url: ''},
            {name: '待办文件数', type: 'schedule', now: 0, last: 0, yoy: 0, start: '', end: '', series: [], xAxis: [], color: `255, 186, 92`, icon: icon1, url: '/schfile'},
            {name: '完成文件数', type: 'complete', now: 0, last: 0, yoy: 0, start: '', end: '', series: [], xAxis: [], color: `119, 213, 135`, icon: icon2, url: '/comfile'},
            {name: '精品文件数', type: 'boutique', now: 0, last: 0, yoy: 0, start: '', end: '', series: [], xAxis: [], color: `68, 196, 236`, icon: icon3, url: '/toufile'},
        ],
        start: dayjs().startOf('year').format('YYYY-MM-DD'),
        end: dayjs().endOf('year').format('YYYY-MM-DD'),
        req: {
            start: dayjs().startOf('year').format('YYYY-MM-DD'),
            end: dayjs().endOf('year').format('YYYY-MM-DD'),  
        },
        geoJson: {},
        ido: false,
    })

    onMounted(async()=>{
        obj.idOpinion = proxy.$useStore().getUser.opinion||proxy.$useStore().getUser.dept_name=='局长'
        gettop()
        if(obj.idOpinion){
            getprovince()
        }
    })

    const go=(x)=>{
        if(!x.url){return}
        proxy.routerPushMixin(x.url)
    }

    const gettop=()=>{
        for (let i = 0; i < obj.types.length; i++) {
            obj.types[i].start = obj.start
            obj.types[i].end = obj.end
            let o = obj.types[i]
            proxy.$ajax({
                url: '/user/file/count/top',
                data: {type:o.type},
                bfLoading: true
            }).then(d => {
                if(d.success){
                    obj.types[i].now = d.msg.now||0
                    obj.types[i].last = d.msg.last||0
                    obj.types[i].yoy = obj.types[i].last>0 ? (((obj.types[i].now - obj.types[i].last) / obj.types[i].last) * 100).toFixed(2) : 0
                }
            }).catch(() => { })
            getfen(o,i)
        }
    }

    const serfen=(i,reset)=>{
        if(reset){
            obj.types[i].start = obj.start
            obj.types[i].end = obj.end
            getfen(obj.types[i],i)
        }else{
            obj.types[i].start = dayjs(obj.types[i].start).startOf('month').format('YYYY-MM-DD')
            obj.types[i].end = dayjs(obj.types[i].end).endOf('month').format('YYYY-MM-DD')
            getfen(obj.types[i],i)
        }
    }

    const getfen=(o,i)=>{
        proxy.$ajax({
            url: '/user/file/count/sub',
            data: {
                type: o.type,
                startdate: o.start,
                enddate: o.end
            },
            bfLoading: true
        }).then(d => {
            if(d.success&&d.msg.list.length){
                let list = d.msg.list||[]
                obj.types[i].xAxis = list.map(e=>{return `${e.d.substring(5,7)}月`})
                obj.types[i].series = list.map(e=>e.c)
            }else{
                obj.types[i].xAxis = []
                obj.types[i].series = []     
            }
            set_echart_fen(obj.types[i],i)
        }).catch(() => { })
    }

    const set_echart_fen = (o,i) => {
        let chartDom = document.getElementById(`echart_fen_${i}`);
        if (chartDom) {
            proxy.$echarts.dispose(chartDom);
        }
        setTimeout(() => {
            let chart_ = proxy.$echarts.init(chartDom);
            let option = {
                xAxis: {
                    type: 'category',
                    data: o.xAxis,
                    axisTick:{show:false},
                    axisLine:{show:false},
                    splitArea: {
                        show: true
                    }
                },
                yAxis: {
                    type: 'value',
                    minInterval: 10,
                    splitLine:{show:false},
                },
                grid: {
                    top: 10,
                    left: 0,
                    right: 0,
                    bottom: 10,
                    containLabel: true
                },
                tooltip: {
                    trigger: 'axis',
                    valueFormatter: function (value) {
                        return `${o.name}：${value}`;
                    }
                },
                series: [
                    {
                        data: o.series,
                        type: 'line',
                        itemStyle: {
                            color: `rgb(${o.color})`
                        },
                        areaStyle: {
                            color: new proxy.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            {
                                offset: 0,
                                color: `rgba(${o.color},1)`
                            },
                            {
                                offset: 1,
                                color: `rgba(${o.color},0)`
                            }
                            ])
                        },
                    }
                ]
            };
            option && chart_.setOption(option);
        }, 0)
    }
    
    const getprovince=()=>{
        proxy.$ajax({
            url: '/user/file/count/opinion',
            data: {startdate: obj.req.start,enddate: obj.req.end},
            bfLoading: true
        }).then(d => {
            let list = d.msg&&d.msg.list?d.msg.list:[]
            let Ps = JSON.parse(JSON.stringify(proxy.$setting.globalData.provinces))
            for (let i = 0; i < list.length; i++) {
                const e = list[i]
                Ps[e.d-1].value = e.c||0
            }
            set_map_echart('china',Ps) 
        }).catch(() => { })
    }
    
    // 南沙诸岛以缩略图展示
    const formatJson=(chinaGeoJson)=>{
        chinaGeoJson.features.forEach((v) => {
            if (v.properties && v.properties.name == '海南省') {
                v.geometry.coordinates = v.geometry.coordinates.slice(0, 1)
            }
            v.properties.value = 999
        })
        // 过滤掉海南诸岛边界线
        chinaGeoJson.features = chinaGeoJson.features.filter((item) => item.properties.adcode !== '100000_JD')
        return chinaGeoJson
    }

    const set_map_echart=(mapKey='china',series)=>{
        let chartDom = document.getElementById(`map_echart`);
        if (chartDom) {
            proxy.$echarts.dispose(chartDom);
        }
        setTimeout(() => {
            let chart_ = proxy.$echarts.init(chartDom);
            //捕捉georoam事件，使下层的geo随着上层的geo一起缩放拖曳
            chart_.on('georoam',function(params){
                var option = chart_.getOption();//获得option对象
                if(params.zoom!=null&&params.zoom!=undefined){ //捕捉到缩放时
                    option.geo[1].zoom = option.geo[0].zoom;//下层geo的缩放等级跟着上层的geo一起改变
                    option.geo[1].center = option.geo[0].center;//下层的geo的中心位置随着上层geo一起改变
                    option.geo[2].zoom = option.geo[0].zoom;//下层geo的缩放等级跟着上层的geo一起改变
                    option.geo[2].center = option.geo[0].center;//下层的geo的中心位置随着上层geo一起改变
                    // option.geo[3].zoom = option.geo[0].zoom;//下层geo的缩放等级跟着上层的geo一起改变
                    // option.geo[3].center = option.geo[0].center;//下层的geo的中心位置随着上层geo一起改变
                }else{//捕捉到拖曳时
                    option.geo[1].center=option.geo[0].center;//下层的geo的中心位置随着上层geo一起改变
                    option.geo[2].center=option.geo[0].center;//下层的geo的中心位置随着上层geo一起改变
                    // option.geo[3].center=option.geo[0].center;//下层的geo的中心位置随着上层geo一起改变
                }
                chart_.setOption(option);//设置option
            });
            const areas_v3_data_ = formatJson(areas_v3_data)
            console.log('areas_v3_data',areas_v3_data);
            proxy.$echarts.registerMap(mapKey, areas_v3_data_);
            let option = {
                backgroundColor: 'rgba(0, 0, 0,0)',
                tooltip: {
                    trigger: 'item',
                    formatter: (e)=>{
                        return `${e.name}<br/>舆情事件总数：${e.value}`
                    }
                },
                visualMap: {
                    min: 0,
                    max: 100,
                    text: ['High', 'Low'],
                    realtime: false,
                    calculable: true,
                    inRange: {
                        color: ['#e9e9e9' , 'orangered', 'yellow', '#65B651']
                    }
                },
                series: [
                    {
                        type: 'map',
                        show: true,
                        map: mapKey,
                        roam: true,
                        zoom: 1.3,
                        scaleLimit: { //滚轮缩放的极限控制
                            min: 1,
                            max: 3.3
                        },
                        geoIndex: 0,
                        aspectScale: 0.78,
                        // label: {show: true},
                        data: series||[],
                    }
                ],
                geo: [
                    {
                        type: 'map',
                        map: mapKey,
                        roam: true,
                        zoom: 1.3,
                        scaleLimit: { //滚轮缩放的极限控制
                            min: 1,
                            max: 3.3
                        },
                        aspectScale: 0.78,
                        layoutCenter: ['50%', '50%'],
                        layoutSize: '100%',
                        show: true,
                        label: {
                            show: true, // 各个省市县的名字
                            position: 'inside',
                            formatter: (e)=>{
                                let o = series.find(ev=>ev.name==e.name)
                                if(o.name=='河北省'){
                                    return [
                                        `{b_hb|${o.value}}`,
                                        `{a_hb|${o.abbreviation}}`,
                                    ].join('\n')
                                }else if(o.name=='北京市'){
                                    return [
                                        `{b_bj|${o.value}}`,
                                        `{a_bj|${o.abbreviation}}`,
                                    ].join('\n')
                                }else if(o.name=='内蒙古自治区'){
                                    return [
                                        `{b_nmg|${o.value}}`,
                                        `{a|${o.abbreviation}}`,
                                    ].join('\n')
                                }else if(o.name=='甘肃省'){
                                    return [
                                        `{b_gs|${o.value}}`,
                                        `{a_gs|${o.abbreviation}}`,
                                    ].join('\n')
                                }else if(o.name=='香港特别行政区'){
                                    return [
                                        `{b_xg|${o.value}}`,
                                        `{a_xg|${o.abbreviation}}`,
                                    ].join('\n')
                                }else if(o.name=='澳门特别行政区'){
                                    return [
                                        `{b_aom|${o.value}}`,
                                        `{a_aom|${o.abbreviation}}`,
                                    ].join('\n')
                                }else{
                                    return [
                                        `{b|${o.value}}`,
                                        `{a|${o.abbreviation}}`,
                                    ].join('\n')
                                }
                            },
                            rich: {
                                a: {},
                                b: {fontSize: 18,},
                                a_bj: {padding: [-10, 0, 0, 0],},
                                b_bj: {fontSize: 18,padding: [-37, 0, 0, 0],},
                                a_hb: {padding: [0, 30, 0, 0],},
                                b_hb: {fontSize: 18,padding: [50, 30, 0, 0],},
                                b_nmg: {fontSize: 18,padding: [20, 0, 0, 0],},
                                a_aom: {},
                                b_aom: {fontSize: 18,padding: [60, 0, 0, 0],},
                                a_xg: {padding: [0, 0, 0, 40],},
                                b_xg: {fontSize: 18,padding: [60, 0, 0, 40],},
                                a_gs: {padding: [-60, 125, 0, 0],},
                                b_gs: {fontSize: 18,padding: [-90, 125, 0, 0],},
                            }
                        },
                    },
                    // 重影
                    {
                        type: 'map',
                        map: mapKey,
                        roam: true,
                        animationDurationUpdate: 0,
                        zoom: 1.3,
                        scaleLimit: { //滚轮缩放的极限控制
                            min: 1,
                            max: 3.3
                        },
                        zlevel: -1,
                        aspectScale: 0.78,
                        layoutCenter: ['50%', '51%'],
                        layoutSize: '100%',
                        silent: true,
                        itemStyle: {
                            borderWidth: 2,
                            borderColor: 'rgba(58,149,253,0)',
                            // shadowColor: 'rgba(172, 122, 255,0.5)',
                            shadowOffsetY: 5,
                            shadowOffsetX: 5,
                            shadowBlur: 20,
                            areaColor: 'rgba(5, 35, 16,1)',
                        },
                    },
                    {
                        type: 'map',
                        map: mapKey,
                        roam: true,
                        animationDurationUpdate: 0,
                        zoom: 1.3,
                        scaleLimit: { //滚轮缩放的极限控制
                            min: 1,
                            max: 3.3
                        },
                        zlevel: -2,
                        aspectScale: 0.78,
                        layoutCenter: ['50%', '51%'],
                        layoutSize: '100%',
                        silent: true,
                        itemStyle: {
                            borderWidth: 2,
                            borderColor: 'rgba(58,149,253,0.3)',
                            // shadowColor: 'rgba(172, 122, 255,0.5)',
                            shadowOffsetY: 5,
                            shadowOffsetX: 5,
                            shadowBlur: 20,
                            areaColor: 'rgba(5, 35, 16,1)',
                        },
                    },
                ],
            }
            option && chart_.setOption(option);
        }, 0)
    }
</script>

<style scoped lang="scss">
    .box {
        width: calc(100% - 30px); height: calc(100% - 30px); margin: 15px;
        background: #fff; box-shadow: 0px 3px 15px 1px rgba(117,117,117,0.24);
        padding: 20px; box-sizing: border-box;
        .topitem{
            position: relative;min-width: 230px;
            padding: 20px 33px; box-sizing: border-box; margin-right: 20px;
            background: #F9FBFC; box-shadow: 0px 3px 15px 1px rgba(117,117,117,0.1);border-radius: 10px 10px 10px 10px;
            .name{font-size: 17px;font-weight: bold;color: #8392A5;}
            .now{font-size: 59px;font-weight: bold;color: #42505C;font-family: "WorkSans-Bold";margin-top: 10px;}
            .yoy{
                font-size: 14px;color: #8392A5; margin-top: 5px;
                .num{color: #77D587;margin: 0 10px;}
                .updownicon{display: block;width: 28px;height: 28px;}
            }
            .down{.num{color: #FF7160;}}
            .topicon{
                position: absolute; top: 27px;right: 33px;z-index: 1;border-radius: 16px;
                width: 66px;height: 66px;
                img{width: 30px;height: 30px;}
            }
            
        }
        .topitem:lasxt-child{margin-right: 0;}
        #map_echart{
            background: rgba(0, 46, 46, 0.78);
            /* background: rgb(236, 255, 235); */
            /* background-image: url('../assets/2.jpeg');
            background-size: 100% 100%; */
        }
        .fenitem-box1{
            display: flex;flex-direction: column;
            .fenitem{width: 100%;flex: 1;}
        }
        .fenitem-box2{
            display: flex;flex-direction: row;flex-wrap: wrap;
            .fenitem{width: 50%;height: calc(50% - 10px);}
            .fenitem:nth-child(3){margin-bottom: 0;}
            .fenitem:nth-child(4){margin-bottom: 0;}
        }
        .fenitem{
            position: relative;min-width: 400px;
            padding: 10px; box-sizing: border-box;
            background: #FFFFFF;box-shadow: 0px 3px 15px 1px rgba(117,117,117,0.1);border-radius: 12px 12px 12px 12px;margin-bottom: 20px;
            .name{font-size: 13px;font-weight: bold;color: #32355C;margin-bottom: 5px;}
            .combtn{width: 40px;height: 22px;background: #FFBA5C;border-radius: 5px 5px 5px 5px;font-size: 12px;color: #fff;cursor: pointer;}
            .calbtn{width: 40px;height: 22px;border-radius: 5px 5px 5px 5px;border: 1px solid #D5D5E5;font-size: 12px;color: #D5D5E5;cursor: pointer;}
        }
        .fenitem:last-child{margin-bottom: 0;}
    }
    .hline{width: 1px;height: 8px;background: #D5D5E5;border-radius: 1px 1px 1px 1px;margin: 5px 0;}
    ::v-deep .el-input{max-width: 100px !important;}
    ::v-deep .el-input .el-input__wrapper{max-width: 100px !important;border-color: #D5D5E5 !important;border-radius: 5px !important;}
</style>